<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>美容院详情</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css{$JSDEBUG}"/>
    
    <script src="__FONT__/js/zepto.min.js"></script>
    <script src="__FONT__/js/TouchSlide.1.1.js"></script>
	<script type="text/javascript" src="__FONT__/js/zepto.picLazyLoad.js"></script>    
    <script type="text/javascript">
	$(function(){
		tab(".ul_new li",".tab_box",1)
		tab(".dsd li",".tab_box2",1)
		tab(".dsds li",".tab_box2s",1);
		
		$('[data-redirect="rel"]').click(function () {
			var url = $(this).attr('data-url');
			window.location.href = url;
		});
		
		var mrslies = $(".mry_four .mry_mrs .uuu .aaa").length;
		var dd = mrslies*281;
		$(".mry_four .mry_mrs .uuu").css('width',dd);	 
		 
		$("img").picLazyLoad({
			scrollElm : $(window),
	 	});
		
// 		$(window).scroll(function() {
//        		if ($(window).scrollTop() >= $(".mrs_detailsec .ul_new").offset().top) {
//                 $(".mrs_detailsec .ul_new").addClass('on');
//             }else{
// 				$(".mrs_detailsec .ul_new").removeClass('on');
// 			}
//         });	
	})
	function tab(a,b,c){
		if(c==1){
			$(a).click(function(){  
			   	var index = $(this).index();
			   	$(this).addClass("on").siblings().removeClass("on");
			   	$(b).hide();      
			   	$(b).eq(index).show();
			});
		} else {
			$(a).hover(function(){  
			   	var index = $(this).index();
			   	$(this).addClass("on").siblings().removeClass("on");
			   	$(b).hide();      
			   	$(b).eq(index).show();
			});
		}        
	}
	</script>
</head>
<body style="background:#f7f7f9;">
	<include file="Public/customHeader" title="美容院详情" url="javascript: history.go(-1);"/>
    <header class="">
       <div id="focus" class="focus mrydetail_head">
				<div class="hd">
					<ul></ul>
                    <p><span>{$item.name}</span><label>{$user_total}人消费</label></p>
				</div>
				<div class="bd">
					<ul>
						<foreach name="covers" item="cover">
						<li><a href="#"><img src="__UPLOADS__/Beauty/Cover/{$cover.upload_number}/{$cover.img_name}" /></a></li>
						</foreach>
					</ul>
				</div>
			</div>
			<script type="text/javascript">
				TouchSlide({ 
					slideCell:"#focus",
					titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
					mainCell:".bd ul", 
					effect:"left", 
					autoPlay:true,//自动播放
					autoPage:true, //自动分页
					switchLoad:"_src" //切换加载，真实图片路径为"_src" 
				});
			</script>
       <div class="mryhead_bottom">
          <ul>
             <li>
               <dd><span><for start="0" end="$item['start']"><i></i></for></span><label class="distance" data-latitude="{$item.latitude}" data-longitude="{$item.longitude}"></label></dd>
               <dd>{$item.address}</dd>
             </li>
             <li><a href="tel:{$item.telphone}"></a></li>
          </ul>
       </div>
    </header>
 	<section class="mrs_detailsec">
         <div class="tab">
            <ul class="ul_new mry_new">
              <li class="on"><a href="javascript:;">美容院介绍</a></li>
              <li><a href="javascript:;">服务项目</a></li>
              <div class="huiline"></div>
            </ul>
            <div class="tab_box box_two">
               <div class="mry_one">
                 <h2>品牌规模与实力：</h2>
                 <p>{$item.size_and_strength}</p>
                 <h2>店面环境：</h2>
                 {$item.environment}
               </div>
               <div class="mry_two mryhack" data-redirect="rel" data-url="{:U('/Comments/index/id/'.$item['id'])}">
                 <h1>顾客评价(<if condition="!$item['comment_total']">0<else />{$item.comment_total}</if>)<label></label></h1>
               </div>
               <div class="mry_three" data-redirect="rel" data-url="{:U('/BeautyParlor/zizhi/id/'.$item['id'])}">
                  <h1>美容院资质<label></label></h1>
               </div>
            </div>
            <div class="tab_box bd" style="display:none" >
               <ul class="beauty_sec_navlist" >
					{:W('ServiceItem/items', array($item['id'], false))}
				</ul>
				<if condition="$beauticianList">
				<div class="mry_four">
                      <h1>美容师</h1>
                      <div class="mry_mrs">
                      <div class="uuu">
                      	<foreach name="beauticianList" item="beautician">
                        <a class="aaa" href="{:U('/Index/detail/id/'.$beautician['id'])}">
                        	<if condition="$beautician['profile_img']">
					       <img src="__UPLOADS__/Profile/{$beautician.profile_img}">
					       <else />
					       <img src="__FONT__/images/defaultProfile.png">
					       </if>
                           <dd>
                              <h2>{$beautician.name}</h2>
                              <h3><for start="0" end="$beautician['start']"><i></i></for></h3>
                              <strong><span>{$beautician.service_total}次服务</span><label>{$beautician.comment_total}条评论</label></strong>
                           </dd>
                        </a>
                        </foreach>
                      </div>
                      </div>
                   </div>
           		</if>
            </div>
         </div>
	</section>
	<script type="text/javascript" src="__FONT__/js/zepto.cookie.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <include file="Public/share-js" />
    <script>
    	function showLocationInfo(pt, rs) {
    		var addComp = rs.addressComponents;
    		var start = {};
    		if (pt.lat && pt.lng) {
    			start ['latitude'] = pt.lat;
    			start ['longitude'] = pt.lng;
    		}
    		
    		var selectProvince = localStorage.getItem('select_province'),
		    	selectCity = localStorage.getItem('select_city'),
		    	ajaxLoadParams = {},
		    	currentProvince = addComp.province,
		    	currentCity = addComp.city;
		    
		    if ($.trim(selectProvince) != '' && $.trim(selectCity) != '' && 
		    		currentProvince != selectProvince && currentCity != selectCity) {
		    	
		    } else {
				var end = {latitude: $('.distance').attr('data-latitude'), longitude: $('.distance').attr('data-longitude')};
				$.ajax({
					url: '{:U("/BeautyParlor/getUserToBeautyDistance")}',
					data: {start: start, end: end},
					dataType: 'json',
					success: function (result) {
						if (result.status == '1') {
							$('.distance').html(result.distance);
						} else {
							$('.distance').html(result.message);
						}
					}
				});
		    }
    	}
    	
//     	function getLocation() {
//       		if (navigator.geolocation) {
//              	navigator.geolocation.getCurrentPosition(showPosition);
//       		} else {
//       			alert("Geolocation is not supported by this browser.");
//       		}
//       	}
         	
//        	function showPosition(position) {
//        		var gc = new BMap.Geocoder();
//            	$.ajax({
//            		url: '{:U("/Index/gpsChange")}',
//            		data: {
//            			lngAndLat :position.coords.longitude +',' +position.coords.latitude
//            		},
//            		dataType: 'json',
//            		success: function (result) {
//            			localStorage.setItem('location', result.data.y +',' +result.data.x);
//            			var currentTime = new Date().getTime();
//     	   			var $expires = currentTime + 7 * 24 * 3600 * 1000;
    	   			
//     	   			$.cookie('latitude', result.data.x, $expires, '/');
//     	   			$.cookie('longitude', result.data.y, $expires, '/');
//        	        	var point = new BMap.Point(result.data.x, result.data.y); //初始化地图中心点
//        	        	gc.getLocation(point, function(rs){
//        	        		showLocationInfo(point, rs);
//        	        	});
//            		}
//            	});
//        	}
       	
//        	getLocation();
    </script>
</body>
</html>